<template>
  <div class="opapibox">
    <div class="bigbox">
      <div class="littlebox newadd">
        <i class="el-icon-plus" @click="newadd"></i>
      </div>
      <div
        class="littlebox"
        v-for="(item, index) in keylist"
        :key="item.userId"
      >
        <el-form ref="form" label-width="100px">
          <el-col :span="24">
            <el-form-item label="AccessSecret">
              <el-input
                size="small"
                v-model="item.accessSecret"
                placeholder=""
                ref="inputkey"
                @blur="blur(item)"
              >
                <i
                  slot="suffix"
                  class="el-icon-view"
                  @click="getkey(item, index)"
                ></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="accessKey">
              <el-input
                size="small"
                v-model="item.accessKey"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="创建时间">
              <el-input
                size="small"
                v-model="item.createTime"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="当前状态">
              <el-radio-group v-model="item.enabled">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="button" v-if="item.enabled">
          <el-button type="primary" size="small" @click="disab(item)"
            >停 用</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAccessKeyapi,
  postAccessKeyapi,
  getOpenapiapi,
  postDisableapi
} from '@/api/system/opapi'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      itemval: {},
      keylist: [],
      // 存储密码是否显示的状态，使用accessKey作为键
      secretVisibleMap: {},
      // 缓存已获取的密码，避免重复调用接口
      secretCache: {}
    }
  },

  async mounted() {
    this.getlist()
  },

  methods: {
    async getkey(val, index) {
      const isVisible = this.secretVisibleMap[val.accessKey] || false
      this.secretVisibleMap[val.accessKey] = !isVisible
      if (!isVisible) {
        this.$refs.inputkey[index].focus()
        if (this.secretCache[val.accessKey]) {
          this.keylist.forEach((ele) => {
            if (ele.accessKey === val.accessKey) {
              ele.accessSecret = this.secretCache[val.accessKey]
            }
          })
        } else {
          getOpenapiapi({ accessKey: val.accessKey }).then((res) => {
            const secret = res.data.entity.accessSecret
            this.secretCache[val.accessKey] = secret
            this.keylist.forEach((ele) => {
              if (ele.accessKey === val.accessKey) {
                ele.accessSecret = secret
              }
            })
          })
        }
      } else {
        this.blur(val)
      }
    },
    blur(val) {
      this.getlist()
    },
    newadd() {
      this.$confirm(`是否需要新创建服务AccessKey?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postAccessKeyapi().then((res) => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '新增成功' : res.message
            })
            if (res.code == '200') this.getlist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 停用
    disab(row) {
      this.$confirm(`是否停用所选服务AccessKey?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postDisableapi(row.accessKey).then((res) => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '停用成功' : res.message
            })
            if (res.code == '200') this.getlist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    async getlist() {
      const {
        data: { list }
      } = await getAccessKeyapi()
      this.keylist = list
    }
  }
}
</script>
<style scoped lang="scss">
.opapibox {
  height: 100%;
  background-color: #f1f1f1;
  padding: 10px;
  .bigbox {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
    background-color: #fff;
    .littlebox {
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: calc(25% - 20px);
      margin: 10px;
      height: 320px;
      padding: 20px;
      .button {
        text-align: center;
      }
      .el-icon-view {
        color: #bbbbbb;
        cursor: pointer;
      }
      .el-icon-view:hover {
        color: #999;
      }
    }
    .newadd {
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 100px;
        cursor: pointer;
        color: #bbbbbb;
      }
    }
  }
}
</style>
